<template>
  <div class="tab-content">
    <grid-view :cols="3"
               :lineSpace="15"
               :vMargin="20"
               v-if="categoriesProduct">
      <div class="content-item" v-for="item in categoriesProduct" :key="item.id">
        <img :src="item.image" alt />
        <p>{{item.title}}</p>
      </div>
    </grid-view>
  </div>
</template>

<script>
import GridView from "components/common/gridview/GridView";
export default {
  name: "TabContent",
  components: {
    GridView,
  },
  data() {
    return {};
  },
  props: {
    categoriesProduct: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {},
};
</script>

<style scoped>
.content-item {
  text-align: center;
  font-size: 12px;
}
.content-item img {
  display: inline-block;
  width: 80%;
}
.content-item p {
  font-size: 14px;
  margin-top: 3px;
}
</style>
